<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统设置</el-breadcrumb-item>
                 <el-breadcrumb-item>直播设置</el-breadcrumb-item>
            </el-breadcrumb>
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="180px">
                <el-form-item label="每人每天最多开直播场数" prop="max_group_per_day">
                    <el-input v-model="form.max_group_per_day" required>
                        <template slot="append">场</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每人最多开直播场数" prop="max_group_total">
                    <el-input v-model="form.max_group_total" required>
                        <template slot="append">场</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="群管理员上限" prop="max_admin_num">
                    <el-input v-model="form.max_admin_num" required>
                        <template slot="append">人</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="开启敏感词校验" prop="open_msg_check">
                    <el-switch
                       v-model="form.open_msg_check"
                       active-value='1'
                       inactive-value='0'
                       active-color="#13ce66"
                       >
                     </el-switch>
                </el-form-item>
                <el-form-item label="开启视频上传" prop="open_video_upload">
                    <el-switch
                       v-model="form.open_video_upload"
                       active-value='1'
                       inactive-value='0'
                       active-color="#13ce66"
                       >
                     </el-switch>
                </el-form-item>
                <!--查看不展示按钮-->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    export default {
        name:'Setting',
        inject:['reload'],
        data() {
			let validateInt=(rule,value,callback)=>{
			   let int_reg=/^([0-9]{1,})$/;
			   let int_arr={
				  max_group_per_day:'每人每天最多开直播场数',
				  max_group_total:'每人最多直播总场数'
			   };
			   let rule_name=int_arr[rule.field];
			   if(value==''){
				   callback(new Error('请输入'+rule_name));
			   }
			   if(!int_reg.test(value)){
				  callback(new Error(rule_name+'必须为正整数'));
			   }else{
				  callback();
			   }
            }
            let validateInt2=(rule,value,callback)=>{
			   let int_reg=/^([0-9]{1,})$/;
			   let rule_name='群管理员上限';
			   if(value==''){
				   callback(new Error('请输入'+rule_name));
			   }
			   if(!int_reg.test(value)){
				  callback(new Error(rule_name+'必须为正整数'));
               }
               if(value==0){
				  callback(new Error(rule_name+'必须大于0'));
			   }
               else{
				  callback();
			   }
			}
            return {
                form: {
                    max_group_per_day:'',
                    max_group_total:'',
                    max_admin_num:'',
                    open_msg_check:0,
                    open_video_upload:0
                },
                //校验规则
                rules:{
                    max_group_per_day: [
                        { validator:validateInt, trigger:"blur"}
                    ],
                    max_group_total:[
                        { validator:validateInt, trigger:"blur"}
                    ],
                    max_admin_num:[
                        { validator:validateInt2, trigger:"blur"}
                    ]
                },
                id:-1,
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'设置'
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                if(this.form.max_group_per_day>this.form.max_group_total){
                    this.$message({
                        message:'每人最多开直播场数必须大于等于每人每天最多开直播场数',
                        type:'error',
                        duration:2000
                    });
                    return false
                }
                else{
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                var send_data={
                                    api_token:this.$store.getters.getSessionId,
                                    max_group_per_day:this.form.max_group_per_day,
                                    max_group_total:this.form.max_group_total,
                                    max_admin_num:this.form.max_admin_num,
                                    open_msg_check:this.form.open_msg_check,
                                    open_video_upload:this.form.open_video_upload
                                };
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                this.$store.dispatch('editSetting',send_data);
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
                }
            },
            back(){
                this.$router.go(-1);
            }
        },
        created(){
            //查询记录
            var send_data={
                api_token:this.$store.getters.getSessionId,
            }
            this.$store.dispatch('loadSettingInfo',send_data);
        },
        computed:{
            editSettingStatus(){
                return this.$store.getters.getEditSettingStatus;
            },
            settinginfo(){
                return this.$store.getters.getSettingInfo;
            }
        },
        watch:{
            editSettingStatus(val){
                let that=this;
                if(val==1){
                    //按钮置为失效
                    this.$message({
                        message:this.content+'成功',
                        type:'success',
                        duration:1000,
                        onClose:function(e){
                            that.loading=false;
                            that.$store.commit('setEditSettingStatus',-1);
                            that.reload();
                        }
                    });
                }else{
                    this.$message({
                        message:this.content+'失败',
                        type:'error',
                        duration:2000
                    });
                    that.loading=false;
                    that.button_name='立即提交';
                    //初始化状态
                    that.$store.commit('setEditSettingStatus',-1);
                }
            },
            //加载到数据之后
            settinginfo(val){
              if(val!=null){
                this.form.max_group_per_day=val.max_group_per_day==0?'':val.max_group_per_day;
                this.form.max_group_total=val.max_group_total==0?'':val.max_group_total;
                this.form.max_admin_num=val.max_admin_num==0?'':val.max_admin_num;
                this.form.open_msg_check=val.open_msg_check.toString();
                this.form.open_video_upload=val.open_video_upload.toString();
                this.id=val.id;
              }
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
